<template>
    <div class="mine">
        <div class="my-header">
            <div class="header-left">
                <van-image
                round
                width=".8rem"
                height=".8rem"
                fit="fill"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <!-- <span>测试用</span> -->
                <router-link tag="span" to="/mine/login">登录/注册</router-link>
                <van-icon name="chat-o" size="0.4rem"/>
            </div>
            <div class="header-right">
                <div class="header-service"><van-icon name="like-o" size=".4rem"/><span>平台服务</span></div>
                <router-link to="./setting" tag="div">
                    <div class="header-setting"><van-icon name="setting-o" size=".4rem" /><span>设置</span></div>
                </router-link>
            </div>
        </div>
        <div class="my-order">
            <router-link to='/order/all' tag="li">
            <div class="order-first" >
                <span class="iconfont icon-dingdan" name="icon-dingdan"></span>
                <label for="icon-dingdan">全部订单</label>
            </div>
            </router-link>
            <router-link to='./order/pay' tag="li">
            <div>
                <span class="iconfont icon-daifukuan"></span>
                <label for="icon-daifukuan">待付款</label>
            </div>
            </router-link>
            <router-link to='./order/produce' tag="li">
            <div>
                <span class="iconfont icon-daishouhuo"></span>
                <label for="icon-daishouhuo">生产/待收货</label>
            </div>
            </router-link>
            <router-link to='./order/assess' tag="li">
            <div>
                <span class="iconfont icon-daipingjia"></span>
                <label for="icon-daipingjia">待评价</label>
            </div>
            </router-link>
            <router-link to='' tag="li">
            <div >
                <span class="iconfont icon-shouhouguanli"></span>
                <label for="icon-shouhouguanli">退款/售后</label>
            </div>
            </router-link>
        </div>
        <div class="my-service">
            <ul class="service-list">
                <li v-for="item in serviceList" :key=item.iconClass>
                    <div>
                        <span :class="`iconfont icon-${item.iconClass}`"></span>
                        <label :for="`icon-${item.iconClass}`">{{item.content}}</label>
                    </div>
                </li>
            </ul>
        </div>
       <Footer :Factive="active"></Footer>
    </div>
</template>

<script>
import Vue from 'vue';
import { Image as VanImage , Icon } from 'vant';
import Footer from '../components/footer'

Vue.use(Icon);
Vue.use(VanImage);
export default {
   data(){
       return {
           active:3,
           serviceList: [
               {
                   iconClass: 'envelopebanknot',
                   content: '我的福利'
               },
               {
                   iconClass: 'tuandui',
                   content: '领立减金'
               },
               {
                   iconClass: 'pengyouquan',
                   content: '朋友'
               },
               {
                   iconClass: 'wabao',
                   content: '每日挖宝'
               },{
                   iconClass: 'kafei',
                   content: '定制咖啡'
               },{
                   iconClass: 'chongzhifanxian',
                   content: '返现专区'
               },{
                   iconClass: 'gongziyufuli',
                   content: '抢福利'
               },{
                   iconClass: 'dunpai-',
                   content: '地震预警'
               },{
                   iconClass: 'liwu',
                   content: '我的礼物'
               }
           ]
       }
   },
   components:{
       Footer
   }
}
</script>

<style lang="stylus" scoped>
.mine
    height 100%
    background-color #f2f2f2
    .my-header 
        background-color #794DFA
        width 100%
        display flex
        justify-content space-between
        align-items center
        padding 0 .4rem
        height 1.5rem
        color #fff
        font-size .2rem
        font-weight 100
        font-family '宋体'
        .header-left 
            display flex
            span 
                margin-left .1rem
                margin-right .2rem
                display flex
                align-items center
                .van-icon-chat-o
                    display flex
                    text-align center
                    align-items center
            
            .van-image
                border 2px solid #fff
        .header-right 
            display flex
            .header-service 
                display flex
                flex-direction column
                justify-content center
                margin-right .3rem
            .header-setting 
                display flex
                flex-direction column

    .service-list
        display flex
        flex-wrap wrap
        li 
            width 20%
            div 
                font-size .25rem
                display flex
                flex-direction column
                position relative
                padding 10px 10px 10px 10px
                justify-content: center;
                align-items: center;
                .iconfont 
                    color #F5A707
                    margin-top .1rem
                .icon-liwu::before
                    font-size .8rem !important
                    margin 0
                    padding 0
                .icon-liwu  
                    margin 0
                    padding 0
                    margin-top -9px !important
                    margin-bottom -10px !important  
  
</style>
<style lang="css">
 .van-icon-chat-o::before {
    position: relative;
    top: 10px;
 }
 .van-icon-like-o::before {
    position: relative;
    left: 10px;
 }
.my-order{
   background-color: #fff;
   display: flex;
   justify-content: space-around;
   align-items: center;
}  
.my-order div {
    display: flex;
    flex-direction: column;
    font-size: .25rem;
    position: relative;
    padding-bottom: 10px;
    /* margin-top: -20px; */
}  
.my-order div .iconfont{
    margin-top: .8rem;
}
.my-order div .iconfont::before{
    position: absolute;
    left: 50%;
    top: 10%;
    margin-left: -12.5px;
    margin-top: -3px;
}  
.order-first::after{
  position: absolute;
    z-index: 1;
    top: 0;
    background-color:  #794DFA;
    right: -10px;
    top: 15px;
    width: .1rem;
    height: 1.3rem;
    background: url('../assets/after.png') no-repeat;
    background-size: 10px;
    content: "";  
} 
.my-service{
    background-color: #fff;
    margin-top: .166667rem;
}

</style>